<template>
  <div class="orderlist">
    <div class="oederheader">
      <el-select v-model="uid" :placeholder="$t('assemble.选择部门')" style="width: 250px;border: none;">
        <el-option v-for="item in departmentlist" :key="item.id" :label="item.nickname" :value="item.id">
        </el-option>
      </el-select>
      <el-input class="input-box" :placeholder="$t('assemble.请输入商品标题或订单号')" prefix-icon="el-icon-search"
        v-model="searchvalue" style="width: 300px;  height: 40px;">
      </el-input>
      <span class="search" @click="getOrderdatalist">{{ $t('assemble.订单搜索') }}</span>
      <span class="shuaxin" @click="shuaxin" style="padding: 0 11px">{{ $t('assemble.刷新') }}</span>
      <span class="shuaxin" @click="handleExcel">{{ $t('assemble.订单列表') }}</span>


      <!-- <span class="shuaxin" @click="export2Excel">数据导出</span> -->

    </div>
    <p class="heng"></p>

    <div v-if="dataList.length>0" class="orderlist-box">
      <div class="list-item" v-for="(item, index) in dataList">
        <div class="listheader">
          <div class="headerleft">
            <p>{{ item.date }}</p>
            <p style="margin-left:50px ;"> {{ $t('assemble.订单编号') }}：{{ item.number }}</p>
          </div>
          <div>
            <p> {{ $t('assemble.合计') }}：￥{{ item.total }}</p>
          </div>
        </div>
        <div class="listcontent">
          <div class="listcontent-left">
            <div class="message">
              <div v-if="item.images" class="message-img">
                <img :src="item.images[0]" alt="">
              </div>

            </div>
            <div style="display: flex;margin-top: 10px;margin-left: 10px;">
              <div style="width: 150px; text-align: center;">
                <div>{{ $t('assemble.商品名称') }}</div>
                <div style="margin-top: 10px;">{{ item.name }}</div>
              </div>
              <div style="width: 100px; text-align: center;">
                <div>{{ $t('assemble.单价') }}</div>
                <div style="margin-top: 10px;">￥{{ item.price }}</div>
              </div>
              <div style="width: 100px; text-align: center;">
                <div>{{ $t('assemble.数量') }}</div>
                <div style="margin-top: 10px;">{{ item.num }}</div>
              </div>
            </div>


          </div>
          <div class="orderdetail">
            <div v-show="item.state == -1" style="color: #E00000;">{{ $t('assemble.未通过审批') }}</div>
            <div v-show="item.state == 0" style="color: #0061D2;">{{ $t('assemble.待审批') }}</div>
            <div v-show="item.state == 1" style="color: #0061D2;">{{ $t('assemble.审核通过') }}</div>
            <div v-show="item.state == 2" style="color: #E00000;">{{ $t('assemble.生产中') }}</div>
            <div v-show="item.state == 3" style="color: #E00000;">{{ $t('assemble.发货') }}</div>
            <div v-show="item.state == 4" style="color: #E00000;">{{ $t('assemble.完成') }}</div>

            <div v-show="item.state == -1" style="color: #E00000;cursor: pointer;" @click="gotoDetail(item, item.id)">{{
              $t('assemble.未通过原因') }}</div>

            <div class="btn" @click="gotoDetail(item, item.id)">
              {{ $t('assemble.订单详情') }}
            </div>

            <div v-if="item.is_status == 1" style="color:#009E42;cursor: pointer;" @click="handleReorder(item)">{{
              $t('assemble.复购此单') }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="dataList.length==0" style="width: 100%;text-align: center;">
        暂无订单
    </div>

    <div style="height:184px ;"></div>
    <el-dialog title="确定导出该数据吗？" :visible.sync="dialogTableVisible" width="70%">
      <div id="excelBox">
        <el-table :data="dataList" height="250" id="out-table">
          <el-table-column property="number" label="订单编号" width="200"></el-table-column>
          <el-table-column property="date" label="下单日期" width="200"></el-table-column>
          <el-table-column property="name" label="商品名称" width="200"></el-table-column>
          <el-table-column property="category" label="产品类别" width="100"></el-table-column>
          <el-table-column property="brand" label="授权品牌" width="100"></el-table-column>
          <el-table-column property="pro" label="授权品牌子类别" width="150"></el-table-column>
          <el-table-column property="num" label="数量" width="100"></el-table-column>
          <el-table-column property="price" label="单价" width="100"></el-table-column>
          <el-table-column property="total" label="总价" width="100"></el-table-column>
        </el-table>
      </div>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportExcel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getcompanyuser, getOrderlist, getinfodata } from '../../../utils/api'
import htmlToPdf from '../../../utils/htmltopdf';

// import {export_json_to_excel} from "@/excel/Export2Excel"


export default {
  data() {
    return {
      searchvalue: '',//搜索内容
      uid: '',//部门显示内容
      departmentlist: [],//部门列表
      dataList: [],
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0,
      },
      dialogTableVisible: false,
      json_data: [],
      json_fields: {
        '订单编号': 'number',
        '下单日期': 'date',
        '商品名称': 'name',
        '产品类别': 'category',
        '授权品牌': 'brand',
        '授权品牌子类别': 'pro',
        '数量': 'num',
        '单价': 'price',
        '总价': 'total',
      }
    }
  },
  created() {
    this.getcompanyuserdataList()
    this.getOrderdatalist()
    localStorage.removeItem('ReorderData')
  },
  methods: {
    handleExcel() {
      this.$router.push({ path: "/home/excelList" })
    },
    exportExcel() {
      htmlToPdf.downloadPDF(document.querySelector('#excelBox'), '订单列表');
    },

    shuaxin() {
      // console.log("333333333333")
      this.getcompanyuserdataList()
      this.getOrderdatalist()
    },
    //获取部门列表
    async getcompanyuserdataList() {
      let res = await getcompanyuser() 
      if (res.code == 1) {
        console.log("部门列表", res)
        this.departmentlist = res.data
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }
    },
    //获取订单列表
    async getOrderdatalist() {
      console.log("部门id", this.uid)
      let data = {
        uid: this.uid,
        keyword: this.searchvalue,
        page: this.pageInfo.page,
        limit: this.pageInfo.limit
      }
      let res = await getOrderlist(data)
      if (res.code == 1) {
        console.log("订单列表", res)
        this.dataList = res.data.list
        this.dataList.forEach((item, index) => {
          this.dataList[index].images = item.images.split(',')
          this.dataList[index].date = this.timestampToTime(item.createtime)
        })

        console.log("导出数据", this.json_data)
        this.pageInfo.total = res.data.count
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }
    },
    searchOrder() {

    },

    timestampToTime(timestamp) {
      // 时间戳为10位需*1000，时间戳为13位不需乘1000
      var date = new Date(timestamp * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      return Y + M + D;
    },

    //复购
    async handleReorder(item) {
      let res = await getinfodata({
        id: item.id
      })
      console.log("订单", res)
      localStorage.setItem('ReorderData', JSON.stringify(res.data))
      let id = res.data.product_id
      this.$router.push({ path: '/home/productDetail', query: { id } })

    },

    gotoDetail(item, id) {
      console.log("item", item)
      localStorage.setItem("refusal", item.remark == null ? false : item.remark)
      this.$router.push({ path: '/mine/orderdetail', query: { id } })
    },
  }
}
</script>
<style scoped lang="scss">
.orderlist {
  width: 850px;
  // height: 796px;
  background: #FFFFFF;
  // background-color: red;
  box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin-top: 20px;
  margin-left: 20px;
  padding: 10px;
  padding-right: 40px;
  box-sizing: border-box;


  .oederheader {
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
    position: relative;

    .input-box {
      width: 800px;
      height: 40px;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      margin-left: 10px;
      font-size: 12px;
    }

    .search {
      width: 90px;
      height: 40px;
      display: inline-block;
      border-radius: 0px 10px 10px 0px;
      background-color: #FF2424;
      font-size: 15px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 40px;
      text-align: center;
      position: absolute;
      right: 210px;
      cursor: pointer;
    }

    .shuaxin {
      // width: 112px;
      height: 40px;
      display: inline-block;
      border-radius: 10px 10px 10px 10px;
      background-color: #FF2424;
      font-size: 15px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 40px;
      text-align: center;
      // margin-left: 40px;
      cursor: pointer;
      padding: 0 20px;
    }
  }

  .heng {
    width: 100%;
    height: 1px;
    opacity: 1;
    background-color: #EDEDED;
  }

  .orderlist-box {

    width: 100%;

    .list-item {
      height: 202px;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      border: 1px solid #B1B1B1;
      margin-bottom: 20px;


      .listheader {
        width: 100%;
        height: 43px;
        background: #EDEDED;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;
        padding: 0 20px 50px;
        box-sizing: border-box;
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #333333;
        display: flex;
        justify-content: space-between;

        .headerleft {
          display: flex;
        }
      }

      .listcontent {
        padding: 0px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .listcontent-left {
          width: 1026px;
          display: flex;
          // justify-content: space-between;
          padding-top: 10px;
          // align-items: center;

          .list-img {
            width: 320px;
            height: 130px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 1px solid #EDEDED;
          }

          .message {
            display: flex;
            width: 250px;
            height: 130px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 1px solid #EDEDED;

            .message-img {
              width: 240px;
              height: 130px;
              // border-right: 1px solid #EDEDED;
              padding: 5px 5px;
              box-sizing: border-box;

              img {
                width: 240px;
                height: 120px;
                border-radius: 10px 10px 10px 10px;
                opacity: 1;
              }
            }
          }

          .ewm-box {
            padding: 5px 25px;
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
              margin: 0;
              font-size: 16px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 19px;
              margin-top: 7px;
            }
          }

        }

        .orderdetail {
          width: 200px;
          height: 153px;
          border-left: 1px solid #B1B1B1;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;

          p {
            font-size: 15px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 19px;
          }

          .btn {
            width: 82px;
            height: 30px;
            background: linear-gradient(315deg, #E00000 0%, #FF2424 100%);
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 350;
            color: #FFFFFF;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>